<template>
	<view>
		<view class="small-my-wallet-balance">
			<view class="small-my-wallet-balance-item row row-between-wrapper">
				<view>{{user.balance}}</view>
				<view @click="routerJump('my_wallet_draw')">提现</view>
			</view>
		</view>
		<view class="small-my-menu-box">
			<view class="small-my-menu-item-box row row-between-wrapper" @click="routerJump('my_wallet_balance_info')">
				<view class="row row-middle">
					<image src="../../static/img/my_wallet/my_wallet_info.png"></image>
					<view>余额明细</view>
				</view>
				<image src="../../static/img/common_more.png"></image>
			</view>
			<view class="small-my-menu-item-box row row-between-wrapper" @click="routerJump('my_coupons')">
				<view class="row row-middle">
					<image src="../../static/img/my_wallet/my_wallet_question.png"></image>
					<view>常见问题</view>
				</view>
				<image src="../../static/img/common_more.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../api/api.js';	
export default {
	data: function() {
		return {
			userId:uni.getStorageSync('userId'),
			user:{}
		};
	},
	onLoad() {
		this.init({userId:this.userId})
	},
	methods: {
		init(data){
			http.getUserInfo(data).then(res => {
				if (res.data.code === 1) {
					this.user = res.data.data;
				}
			});
		},
		routerJump(routerName) {
			uni.navigateTo({
				url: routerName
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../common/mixins';
.small-my-wallet-balance{
	width: 95%;
	height: 220upx;
	margin: 20upx auto;
	background-image: url(http://mall.sylady.net/title/uploadImg/small/img/my_wallet_balance.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;
}
.small-my-wallet-balance-item{
	padding: 0 40upx;
	height: 170upx;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	:first-child{
		font-size: 60upx;
		color: #FEE3AE;
	}
	:nth-child(2){
		width: 150upx;
		height: 50upx;
		text-align: center;
		line-height: 46upx;
		border-radius: 20upx;
		border: 2upx solid #FEE3AE;
		color: #FEE3AE;
	}
}
.small-my-menu-box {
	@include box;
}
.small-my-menu-item-box {
	height: 90upx;
	> view {
		position: relative;
		> image {
			width: 44upx;
			height: 44upx;
		}
		& + image {
			width: 20upx;
			height: 20upx;
		}
		:nth-child(2) {
			margin-left: 20upx;
		}
	}
}
</style>
